<template>
  <div>
 
    <RouterView></RouterView>
  </div>
  <div>
    <van-tabbar v-model="active">
      <van-tabbar-item name="Home" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item name="quan" icon="certificate">生活圈</van-tabbar-item>
      <van-tabbar-item name="send">
        <div class="jiajia">+</div>
      </van-tabbar-item>

      <van-tabbar-item name="Message" icon="chat-o">消息</van-tabbar-item>
      <van-tabbar-item name="My" icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const active = ref(route.name as string);
watch(active, (val) => {
  console.log(val);
  router.push({
    name: val,
  });
});
</script>

<style  >
.van-tabbar {
  height: 4rem;
  border-top: 0.01rem solid gray;
}

.jiajia {
  font-size: 2rem;
  width: 2.5rem;
  height: 2.5rem;
  text-align: center;
    line-height: 2.5rem;
  background: linear-gradient(145deg, rgb(108, 118, 243), rgb(210, 116, 144));
  border-radius: 50%;

  color: white;
}
</style>